<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学员信息表</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>


    <div class="nav">
        <h1>学员信息表</h1>
        <p>1804</p>
    </div>


    <div class="add">

        <p>添加</p>

        <input type="text" placeholder="姓名" id="n">
        <select id="s">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <input type="number" placeholder="年龄" id="a">

        <button id="btn">添加</button>
    </div>

    <div class="list">
        <p>列表</p>
        <div class="n">
            <span class="name" style="padding: 8px;">姓名</span>
            <span class="sex">性别</span>
            <span class="age">年龄</span>
        </div>

        <ul id="list">

        </ul>
    </div>


    <script>
        document.querySelector("#btn").addEventListener("click",function () {
            var n = document.querySelector("#n").value;
            console.log(n);
            var s = document.querySelector("#s").value;
            console.log(s);
            var a = document.querySelector("#a").value;
            console.log(a);


            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
			loadXMLDoc()
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    console.log(xmlhttp.responseText);
                }
            }
            xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a,true);
            xmlhttp.send();
        })




        function loadXMLDoc()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    var json=JSON.parse(xmlhttp.responseText);
                    console.log(json);
                    document.querySelector("#list").innerHTML=""
                    for(let i = 0;i<json.data.length;i++){
                        var li = document.createElement("li");
                        var spanName = document.createElement("span");
                        spanName.innerHTML= json.data[i].studentName;
                        spanName.className = "name";
                        var spanSex = document.createElement("span");
                        spanSex.innerHTML= json.data[i].sex;
                        spanSex.className = "sex";
                        var spanAge = document.createElement("span");
                        spanAge.innerHTML=json.data[i].age;
                        spanAge.className = "age";

                        li.appendChild(spanName);
                        li.appendChild(spanSex);
                        li.appendChild(spanAge);

                        document.querySelector("#list").appendChild(li);
                    }
                }
            }

            xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student",true);
            xmlhttp.send();
        }
        loadXMLDoc()
    </script>


</body>
</html>